<div class="col-sm-12 small text-muted">
  You can select which environment should be part of this group by moving them to the associated environments table. Simply click on any environment entry to move it from one table
  to the other.
</div>
<div class="col-sm-12" style="margin-top: 20px">
  <!-- available-endpoints -->
  <div class="col-sm-6">
    <div class="text-center small text-muted">Available environments</div>
    <div style="margin-top: 10px">
      <group-association-table
        loaded="$ctrl.loaded"
        page-type="$ctrl.pageType"
        table-type="available"
        retrieve-page="$ctrl.getPaginatedEndpoints"
        dataset="$ctrl.endpoints.available"
        entry-click="$ctrl.associateEndpoint"
        pagination-state="$ctrl.state.available"
        empty-dataset-message="No environment available"
        tags="$ctrl.tags"
        show-tags="true"
        groups="$ctrl.groups"
        show-groups="true"
        has-backend-pagination="true"
        data-cy="edgeGroupCreate-availableEndpoints"
      ></group-association-table>
    </div>
  </div>
  <!-- !available-endpoints -->
  <!-- associated-endpoints -->
  <div class="col-sm-6">
    <div class="text-center small text-muted">Associated environments</div>
    <div style="margin-top: 10px">
      <group-association-table
        loaded="$ctrl.loaded"
        page-type="$ctrl.pageType"
        table-type="associated"
        retrieve-page="$ctrl.getPaginatedEndpoints"
        dataset="$ctrl.endpoints.associated"
        entry-click="$ctrl.dissociateEndpoint"
        pagination-state="$ctrl.state.associated"
        empty-dataset-message="No associated environment"
        tags="$ctrl.tags"
        show-tags="true"
        groups="$ctrl.groups"
        show-groups="true"
        has-backend-pagination="true"
        data-cy="edgeGroupCreate-associatedEndpoints"
      ></group-association-table>
    </div>
  </div>
  <!-- !associated-endpoints -->
</div>
